<div [ngClass]="isFullscreen?'front-page-wrapper':'front-page-wrapper-fullscreen'">
    <div id="map" class="map">
    </div>
    <div id="scalebar"></div>

    <div *ngIf="map" class="layersPanelState" [ngStyle]="{'display':layersPanelState?'block':'hidden'}">
        <kylin-layers-panel [map]="map" [state]="layersPanelState"
                            (stateChange)="layersPanelStateChange($event)"></kylin-layers-panel>
    </div>

    <!--<div class="button-group">

        &lt;!&ndash; <div class="button-group-item">
             <button nz-button nzType="default" nzShape="circle"
                     (click)="this.administrativeLayerMenu=!this.administrativeLayerMenu">
                 <kylin-icon icon="eye"></kylin-icon>
             </button>
             <div class="left-menu" *ngIf="administrativeLayerMenu">
                 <ul style="width:120px;left: -120px">
                     <li>省界
                         <nz-switch class="switch" nzSize="small" [ngModel]="administrativeLayerButtons.province"
                                    (ngModelChange)="administrativeLayer($event,'province')">
                         </nz-switch>
                     </li>
                     <li>市界
                         <nz-switch class="switch" nzSize="small" [ngModel]="administrativeLayerButtons.city"
                                    (ngModelChange)="administrativeLayer($event,'city')">
                         </nz-switch>
                     </li>
                     <li>区县界
                         <nz-switch class="switch" nzSize="small" [ngModel]="administrativeLayerButtons.counties"
                                    (ngModelChange)="administrativeLayer($event,'counties')"></nz-switch>
                     </li>
                 </ul>
             </div>
         </div>&ndash;&gt;

        &lt;!&ndash; <div class="button-group-item">
             <button nz-button nzType="default" nzShape="circle" (click)="rotateNorth()">
                 <kylin-icon icon="man"></kylin-icon>
             </button>
         </div>&ndash;&gt;

        <div class="button-group-item" (click)="this.switchLayerMenu=!this.switchLayerMenu">
            <button nz-button nzType="default" nzShape="circle">
                <kylin-icon icon="fork"></kylin-icon>
            </button>
            <div class="left-menu" *ngIf="switchLayerMenu">
                <ul>
                    <li (click)="switchLayer('default')">标准地图</li>
                    <li (click)="switchLayer('satellite')">卫星图</li>
                    <li routerLink="/earth">3D地球</li>
                </ul>
            </div>
        </div>
    </div>-->


    <!-- <div class="map-layer-search" [ngStyle]="{'top':isFullscreen?'36px':'8px'}">
         <kylin-map-layer-search [map]="map"></kylin-map-layer-search>
     </div>-->

    <div class="location-search">
        <kylin-location-search [map]="map"></kylin-location-search>
        <!--        <kylin-map-interaction [map]="map" [operationData]="utilsData"></kylin-map-interaction>-->
        <kylin-measure [map]="map"></kylin-measure>
        <kylin-data-import></kylin-data-import>
    </div>

    <!--<div class="map-legend" *ngIf="hasMapLegend">
        <kylin-map-legend (close)="mapLegendClose($event)"></kylin-map-legend>
    </div>

    <button *ngIf="hasMapLegendButton" class="map-legend-button" nz-button nzType="default" nzShape="circle"
            (click)="hasMapLegend=true;hasMapLegendButton = false">
        <kylin-icon icon="up"></kylin-icon>
    </button>-->

    <button class="fullscreen" nz-button nzType="primary" nzSize="large" nzShape="circle"
            (click)="fullscreenButtonClick()"><i nz-icon
                                                 [nzType]="isFullscreen?'left':'right'"></i>
    </button>

    <div class="map-switch">
        <ul>
            <li class="map-default" (click)="switchLayer('default')">地图</li>
            <li class="map-satellite" (click)="switchLayer('topographic')">地形图</li>
            <li class="map-topographic" (click)="switchLayer('satellite')">卫星图</li>
        </ul>
    </div>

    <div class="map-control">
        <div>
            <button nz-button nzType="default" nzShape="circle" (click)="location()"><i nz-icon
                                                                                        iconfont="icondingwei"></i>
            </button>
        </div>
        <div>
            <button nz-button nzType="default" nzShape="circle" (click)="changeZoom('plus')"><i nz-icon nzType="plus"
                                                                                                nzTheme="outline"></i>
            </button>
        </div>
        <div>
            <button nz-button nzType="default" nzShape="circle" (click)="changeZoom('minus')"><i nz-icon nzType="minus"
                                                                                                 nzTheme="outline"></i>
            </button>
        </div>
    </div>

    <i class="layers-panel-switch" nz-icon nzType="left" nzTheme="outline" (click)="layersPanelState=true"></i>;
</div>
